<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>Meatball</title>
	<!-- ICON -->
	<link href="/meatball/images/meatball.ico" type="image/ico" rel="shortcut icon">
	<!-- CSS -->
	<link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
</head>
<body>
<div class="layui-fluid" style="margin-top: 10px">
	<div class="layui-row">
		<div class="layui-md12">
			<div class="layui-row">
				<div class="layui-col-md1">
					<form class="layui-form" style="float: left;">
						<button class="layui-btn layui-btn-warm" lay-submit lay-filter="addBtn" title="新增">
							<i class="layui-icon">&#xe61f;</i> 新增
						</button>
					</form>
				</div>
				<div class="layui-col-md11">
					<form class="layui-form" id="queryForm" style="float: right;">
						<div class="layui-inline">
							<input type="text" name="account" title="账号" placeholder="请输入账号" autocomplete="off" class="layui-input">
					 	</div>
						<div class="layui-inline">
							<input type="text" name="name" title="姓名" placeholder="请输入姓名" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-input-inline">
							<select name="sex" title="性别">
								<option value="-1"l>请选择性别</option>
								<option value="0">保密</option>
								<option value="1">男</option>
								<option value="2">女</option>
							</select>
						</div>
						<div class="layui-inline">
							<input type="text" name="email" title="邮件" placeholder="请输入邮件" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-inline">
							<input type="text" name="phone" title="电话" placeholder="请输入联系方式" autocomplete="off" class="layui-input">
						</div>
						<button class="layui-btn" lay-submit lay-filter="query">
							<i class="layui-icon">&#xe615;</i> 查询
						</button>
					</form>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<!-- 表格 -->
			<table id="table" lay-filter="table"></table>
		</div>
	</div>
</div>
<!-- 操作 -->
<script type="text/html" id="operationBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 状态操作 -->
<script type="text/html" id="status">
	<input type="checkbox" id="{{d.id}}" name="status" value="{{d.status}}" lay-skin="switch" lay-text="启用|冻结" lay-filter="switchSysUser" {{ d.status == 1 ? 'checked' : '' }}>
</script>

<!-- 新增 -->
<script type="text/html" id="addForm">
<form class="layui-form layui-form-pane">
	<div class="layui-row">
		<div class="layui-col-md3">
			<div class="layui-col-md12">
				<img class="layui-user-head-img" src="/meatball/images/head_null.jpg">
			</div>
		</div>
		<div class="layui-col-md9">
			<div class="layui-col-md12">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-block">
						<input type="text" name="account" autocomplete="off" placeholder="请设置账号" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">密码</label>
					<div class="layui-input-block">
						<input type="text" name="password" autocomplete="off" placeholder="请设置密码" class="layui-input" lay-verify="required">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input" lay-verify="required">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-form-item" pane="">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					{{# for(var i = 0; i < d.length; i++) { }}
						<input type="checkbox" name="roles" lay-skin="primary" title="{{d[i].roleName}}" value="{{d[i].id}}">
					{{# } }}
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<select name="sex">
						<option value="0">保密</option>
						<option value="1">男</option>
						<option value="2">女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">生日</label>
				<div class="layui-input-block">
					<input type="text" name="birthday" autocomplete="off" placeholder="请选择日期" class="layui-input birthday" readonly="readonly" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input" lay-verify="email">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系方式</label>
				<div class="layui-input-block">
					<input type="text" name="phone" autocomplete="off" placeholder="请输入联系方式" class="layui-input" lay-verify="phone">
				</div>
			</div>
		</div>
		<div class="hidden-attribute">
			<button class="layui-btn submit" lay-submit="" lay-filter="add">新增</button>
			<button class="layui-btn reset" type="reset">重置</button>
		</div>
	</div>
	<input class="hidden-attribute" name="avatar">
</form>
</script>

<!-- 详情 -->
<script type="text/html" id="view">
<table class="layui-table" style="width: 680px; margin: 10px 10px 0px 10px;">
	<tr>
		<td rowspan="5" class="table-td-head">
			<img class="layui-user-head-img" src="{{'/image/' + d.avatar}}">
		</td>
	</tr>
	<tr>
		<td class="table-td-title">账号</td>
		<td width="465">{{d.account}}</td>
	</tr>
	<tr>
		<td class="table-td-title">姓名</td>
		<td width="465">{{d.name}}</td>
	</tr>
	<tr>
		<td class="table-td-title">性别</td>
		<td width="465">{{d.sexName}}</td>
	</tr>
	<tr>
		<td class="table-td-title">生日</td>
		<td width="465">{{d.birthdayText}}</td>
	</tr>
</table>
<table class="layui-table" style="width: 680px; margin: 5px 10px 10px 10px;">
	<tr>
		<td class="table-td-title">角色</td>
		<td colspan="3">
			{{# for(var i = 0; i < d.rolesVo.length; i++) { }}
				{{d.rolesVo[i].roleName + (i < d.rolesVo.length - 1 ? '，' : '')}}
			{{# } }}
		</td>
	</tr>
	<tr>
		<td class="table-td-title">邮箱</td>
		<td width="265">{{d.email}}</td>
		<td class="table-td-title">联系方式</td>
		<td width="265">{{d.phone}}</td>
	</tr>
	<tr>
		<td class="table-td-title">所属部门</td>
		<td width="265">{{d.roleid == null ? '无' : d.roleid}}</td>
		<td class="table-td-title">状态</td>
		<td width="265">{{d.statusName}}</td>
	</tr>
	<tr>
		<td class="table-td-title">拥有角色</td>
		<td width="265">{{d.deptid == null ? '无' : d.deptid}}</td>
		<td class="table-td-title">创建时间</td>
		<td width="265">{{d.createtimeText}}</td>
	</tr>
</table>
<br>
</script>

<!-- 编辑 -->
<script type="text/html" id="editForm">
<form class="layui-form layui-form-pane">
	<div class="layui-row">
		<div class="layui-col-md3">
			<div class="layui-col-md12">
				<img class="layui-user-head-img" src="{{'/image/' + d.avatar}}">
			</div>
		</div>
		<div class="layui-col-md9">
			<div class="layui-col-md12">
				<div class="layui-form-item">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-block">
						<input type="text" name="account" autocomplete="off" placeholder="请设置账号" class="layui-input" lay-verify="required" value="{{d.account}}">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">重置密码</label>
					<div class="layui-input-block">
						<input type="checkbox" name="resetPwd" lay-skin="switch" lay-text="是|否">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">姓名</label>
					<div class="layui-input-block">
						<input type="text" name="name" autocomplete="off" placeholder="请输入姓名" class="layui-input" lay-verify="required" value="{{d.name}}">
					</div>
				</div>
			</div>
		</div>
		<div class="layui-col-md12">
			<div class="layui-form-item" pane="">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					{{# for(var i = 0; i < d.allRoles.length; i++) { }}
						{{# 
							var ckecked = false;
							for(var j = 0; j < d.rolesVo.length; j++) { 
								if(d.allRoles[i].id == d.rolesVo[j].id) { 
									ckecked = true
								}
						 	} 
						 }}
						<input type="checkbox" name="roles" lay-skin="primary" title="{{d.allRoles[i].roleName}}" value="{{d.allRoles[i].id}}" {{ckecked ? 'checked' : ''}} >
					{{# } }}
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<select name="sex">
						<option value="0" {{d.sex == 0 ? 'selected ' : ''}}>保密</option>
						<option value="1" {{d.sex == 1 ? 'selected ' : ''}}>男</option>
						<option value="2" {{d.sex == 2 ? 'selected ' : ''}}>女</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">生日</label>
				<div class="layui-input-block">
					<input type="text" name="birthday" autocomplete="off" placeholder="请选择日期" class="layui-input birthday" value="{{d.birthdayText}}">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input" lay-verify="email" value="{{d.email}}">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">联系方式</label>
				<div class="layui-input-block">
					<input type="text" name="phone" autocomplete="off" placeholder="请输入联系方式" class="layui-input" lay-verify="phone" value="{{d.phone}}">
				</div>
			</div>
		</div>
		<div class="hidden-attribute">
			<button class="layui-btn submit" lay-submit="" lay-filter="update">新增</button>
			<button class="layui-btn reset" type="reset">重置</button>
		</div>
	</div>
	<input class="hidden-attribute" name="avatar" value="{{d.avatar}}" title="头像">
	<input class="hidden-attribute" name="id" value="{{d.id}}" title="ID">
</form>
</script>

<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<!-- javascirpt -->
<script th:inline="javascript">
var allRoles = [[${allRoles}]];
</script>
<script type="text/javascript" th:inline="none">
layui.config({
	base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
	index: 'lib/index' //主入口模块
}).use(['index', 'upload'], function() {
	var table = layui.table,
		form = layui.form,
		laydate = layui.laydate,
		upload = layui.upload,
		element = layui.element,
		laytpl = layui.laytpl,
		$ = layui.jquery,
		$addBtn = $('#addBtn'),
		$queryForm = $('#queryForm'),
		layerIndex = 1;
	
	// 绘制表格
	table.render({
// 		id: 'table',
		elem: '#table',
		url: '/system/user/table',
		page: true, // 开始分页
		// cellMinWidth: 80, // 定义全局最小宽度
		request: {
			pageName: 'offset'
		},
		response: {
            statusCode: 200
          // countName: 'total', //数据总数的字段名称，默认：count
          // dataName: 'list' //数据列表的字段名称，默认：data
		},
		cols: [[
			{type: 'numbers', title: '序号'},
			{field:'account', title: '账号', sort: true},
			{field:'name', title: '姓名'},
			{field:'sexName', title: '性别'},
			{field:'email', title: '邮件'},
			{field:'phone', title: '电话'},
			{field:'createtimeText', title: '创建时间'},
			{field:'status', title: '状态', align:'center', templet: '#status'},
			{fixed: 'right', align:'center', width: 180, toolbar: '#operationBar'}
		]]
	});
	//监听工具条
	table.on('tool(table)', function(obj) {
		var data = obj.data,
			$this = $(this),
			getView = view.innerHTML,
			getEdit = editForm.innerHTML;
		if(obj.event === 'detail') {
			$.get('/system/user/' + data.id, function(res) {
				if(res.code == 403) {
					layer.msg(res.message, {icon: 4});
				} else {
					laytpl(getView).render(res, function(html) {
						popupWin($this.text(), html, false);
					})
				}
			})
		} else if(obj.event === 'del') {
			layer.confirm('真的删除行么', {icon: 3}, function(index) {
				operate('DELETE', {'id': data.id}, false, obj);
				layer.close(index);
			});
		} else if(obj.event === 'edit') {
			$.get('/system/user/' + data.id, function(res) {
				if(res.status == 403) {
					layer.msg(res.message, {icon: 4});
				} else {
					res.allRoles = allRoles;
					laytpl(getEdit).render(res, function(html) {
						popupWin($this.text(), html, true);
					});
					rendering();
				}
			})
		}
	});
	
	// 监听状态改变
	form.on('switch(switchSysUser)', function(obj) {
		operate('PUT', {'id': this.id, 'statusType': obj.elem.checked}, false);
	});
	
	// 搜索条件提示
	$queryForm.find('input').on('mouseover', function() {
		if(typeof($(this).attr('title')) == 'undefined') return;
		layer.tips($(this).attr('title'), this, {tips: 1});
	})
	
	// 新增
	form.on('submit(addBtn)', function(data) {
		var $this = $(this);
		laytpl(addForm.innerHTML).render(allRoles, function(html) {
			popupWin($this.attr('title'), html, true);
		});
		rendering();
		return false;
	})
	
	// 新增用户
	form.on('submit(add)', function(data) {
		var $form = $(this).parents('form');
		var roles = [];
		$form.find('input[name=roles]:checked').each(function() {
			roles.push($(this).val());
		})
		data.field.roles = roles;
		operate('POST', data.field, true);
		return false;
	})
	
	// 更新
	form.on('submit(update)', function(data) {
		var $form = $(this).parents('form');
		var roles = [];
		$form.find('input[name=roles]:checked').each(function() {
			roles.push($(this).val());
		})
		data.field.roles = roles;
		operate('PUT', data.field, true);
		return false;
	})
	
	// 查询用户
	form.on('submit(query)', function(data) {
		table.reload('table', {
			where: data.field
		});
		return false;
	})
	
	// 用户操作
	// ajaxType 请求类型
	// data 参数
	// refresh 是否刷新
	// 删除操作时传入的当前行对象
	function operate(ajaxType, data, refresh, delRow) {
		var url = '/system/user/';
		if(ajaxType == 'DELETE') {
			url = '/system/user/' + data.id;
		}
		$.ajax({
			url: url,
		    type: ajaxType,
		    async: true,
		    data: data,
		    success: function(res) {
		    	if(res.code == 200) {
					layer.close(layerIndex);
					if(refresh) {
		    			table.reload('table');
					} else if(ajaxType == 'DELETE') {
						delRow.del();
					}
		    		if(data.resetPwd) {
		    			layer.alert(res.message, {icon: 6});
		    		} else {
						layer.msg(res.message, {icon: 1});
		    		}
		    	}  else if(res.code == 403) {
		    		layer.msg(res.message, {icon: 4});
		    	} else {
		    		layer.msg(res.message, {icon: 5});
		    	}
		    }
		})
	}
	
	//渲染弹框
	function popupWin(title, content, showBtn) {
		layerIndex = layer.open({
			id: 'meatball',
			type: 1, //Page层类型
			area: '700px', //['700px', '480'],
			maxWidth: 1000,
			maxHeight: 800,
			title: title,
			shade: 0.1, //遮罩透明度
			// maxmin: true, //允许全屏最小化
			anim: 0, //0-6的动画形式，-1不开启
			scrollbar: false, //禁用滚动
			content: content,
			btn: showBtn ? ['<i class="layui-icon">&#xe61f;</i> 提交', '<i class="layui-icon">&#x1002;</i> 重置'] : '',
			yes: function(index, layero) {
				layero.find('form .submit').trigger('click');
				return false;
			},
			btn2: function(index, layero) {
				layero.find('form .reset').trigger('click');
				return false;
			}
		});
        // layer.full(layerIndex);
	}
	
	// 动态渲染控件
	function rendering() {
		var $form = $('form');
		// 渲染select
		form.render('select');
		// 重新渲染多选框
		form.render('checkbox');	
		// 初始化日期
		laydate.render({
			elem: '.birthday'
		});
		// 上传头像
		upload.render({
			elem: '.layui-user-head-img',
			url: '/upload',
			size: 10240, // 限制上传大小
			done: function(res, index, upload) {
				$form.find('.layui-user-head-img').attr('src', res[0].url);
				$form.find('input[name=avatar]').val(res[0].url);
			}
		})
	}
});
</script>
</body>
</html>